<template>
  <div>
    <!-- 用户性别统计柱状图 -->
    <el-card class="chart-card">
      <div class="card-header">
        <span>用户性别统计</span>
      </div>
      <div class="chart-container" ref="genderChart"></div>
    </el-card>

    <!-- 文章类别统计柱状图 -->
    <el-card class="chart-card">
      <div class="card-header">
        <span>文章类别统计</span>
      </div>
      <div class="chart-container" ref="categoryChart"></div>
    </el-card>

    <!-- 用户活跃度线形图 -->
    <el-card class="chart-card">
      <div class="card-header">
        <span>文章点赞数量</span>
      </div>
      <div class="chart-container" ref="activityChart"></div>
    </el-card>

    <!-- 实时更新数据栏 -->
    <el-card>
      <div class="card-header">
        <span>实时更新数据</span>
      </div>
      <div class="real-time-data">
        <p>当前在线用户数：1</p>
       
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      onlineUserCount: 0,
      articleReadCount: 0
    }
  },
  mounted() {
    this.renderGenderChart()
    this.renderCategoryChart()
    this.renderActivityChart()
    this.startRealTimeUpdates()
  },

  methods: {
    async renderGenderChart() {
      try {
        const response = await this.$http.get('http://localhost:8080/user/list')
        const userData = response.data

        // 统计男女数量
        const genderData = userData.reduce((acc, user) => {
          // 输出调试信息
          console.log(`User ${user.user_name}, Gender: ${user.user_sex}`)

          // 根据布尔值判断性别
          const gender = user.user_sex ? '男' : '女'
          acc[gender] = (acc[gender] || 0) + 1
          return acc
        }, {})

        // 输出调试信息
        console.log('Gender Data:', genderData)

        // 转换为 ECharts 饼图需要的数据格式
        const pieChartData = Object.entries(genderData).map(([gender, count]) => ({
          value: count,
          name: gender
        }))

        // 输出调试信息
        console.log('Pie Chart Data:', pieChartData)

        const genderChart = echarts.init(this.$refs.genderChart)
        genderChart.setOption({
          title: {
            text: '用户性别统计',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          series: [
            {
              name: '性别',
              type: 'pie',
              radius: '50%',
              data: pieChartData
            }
          ]
        })
      } catch (error) {
        console.error(error)
      }
    },

    renderCategoryChart() {
      const categoryChart = echarts.init(this.$refs.categoryChart)
      categoryChart.setOption({
        title: {
          text: '文章类别统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: '类别',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 9, name: '心理科普' },
              { value: 9, name: '婚恋情感' },
              { value: 8, name: '家庭关系' },
              { value: 7, name: '人际社交' },
              { value: 5, name: '自我觉察' },
              { value: 4, name: '成长学习' },
              { value: 4, name: '性心理' }
            ]
          }
        ]
      })
    },

    renderActivityChart() {
      const activityChart = echarts.init(this.$refs.activityChart)
      activityChart.setOption({
        xAxis: {
     type: 'category',
      data: ['心理科普', '婚恋情感', '家庭关系', '人际社交', '自我觉察', '成长学习', '性心理']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [20, 18, 30, 15, 7, 10, 13],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 300, 180, 0.4)'
      }
    }
  ]
      })
      // ... 略去前面的内容，与之前的代码相同
    },

    startRealTimeUpdates() {
      // ... 略去前面的内容，与之前的代码相同
    }
  }
}
</script>

<style scoped>
.chart-card {
  margin-bottom: 20px;
}

.chart-container {
  height: 300px;
}

.real-time-data {
  text-align: center;
  font-size: 16px;
  padding: 20px;
}
</style>